<template>
    <!--案例： v-bind 点击改变id的属性-->
    <p v-bind:id="id">v-bind绑定了id的属性为d1</p>
    <div @click="id='d2'">点击更改id的属性</div>
    <button @click="onClick">点击更改属性</button>
    <!-- 文本插值表达式 -->
    <h1>{{ msg }}</h1>
    <h2>{{ htmlraw }}</h2>
    <h3 v-html="htmlraw"></h3>
    <!--
    v-bind 指令 语法
        v-bind:属性名="变量"
        简写方式： :属性名="变量"

    -->
    <img v-bind:src="imgurl" width="300" height="300" alt="">
    <a :href="AIurl"> M站AI客服</a>
    <img :src="cys" alt="" width="300" height="300">
    <!--响应式处理 
    ref : 你定义的变量需要 动态修改时 需要使用响应式处理
         ref 只是用来出简单的数据 比如：单变量 数组 数组对象
         赋值方式是：.value 方式赋值

    reactive： 用来处理复杂数据 比如：对象 数组对象
        赋值方式是： 直接赋值 例如：obj.name = '张三'
    -->
    <h2>针对购买数量进行实时增加</h2>
    <h3>当前购买数量：{{ count }}</h3>
    <button @click="count++">增加</button>
    <button @click="onCount">增加</button>

</template>
<script setup>
import { reactive, ref } from 'vue'
import cy from '../assets/cy.jpg'
/**
 * 文本插值表达式
 */
//定义一个变量 let var
const msg = 'hello vue3'
const htmlraw = '<h1 style="color:red">hello vue3</h1>'

const imgurl ="https://img14.360buyimg.com/mobilecms/s360x360_jfs/t1/321510/20/9465/64341/684fd539Fdf819aa8/7d965976c9960a0d.png"
const AIurl = "https://chat.deepseek.com/"
const cys = cy
const count = ref(0)
// function onCount() {
    
// }
const onCount = () => { 
    count.value +=5
}

const id = ref('d1')
// function onClick() { 
//     id.value = 'd2'
// }
const onClick = (num) => { 
    id.value = 'd2'
    num =100
    console.log(num);
    
}
</script>
<style scoped>
#d1{
    color: red;
}
#d2{
    background-color: black;
    color: white;
    font-weight: 800;
    font-size: 20px;
}

</style>